<%+header%>
<script type="text/javascript" src="<%=resource%>/cbi.js"></script>

<script type="text/javascript">//<![CDATA[

	var displayExtraInfo = function ( id ) {

		document.getElementById('extra-info').innerHTML = document.getElementById(id).innerHTML;
	}
	XHR.poll(5, '/cgi-bin/bmx6-info', { 'descriptions/all': '' },
		function(x, st)
		{
		  var tb = document.getElementById('descriptions_table');
		  var rowcount = 0;
		  var tunicon = "<%=resource%>/icons/tunnel.png";
		  /* clear all rows */
		  while( tb.rows.length > 1 ) tb.deleteRow(1);

		  for ( var k in st  )
			{
			var description = st[k].DESC_ADV;
		  	var tun4in6;

			for ( var k in description.extensions )
				{
				var value = description.extensions[k];

					if ( value.TUN4IN6_NET_EXTENSION )
						{
						tun4in6 = value.TUN4IN6_NET_EXTENSION;
						break;
						}
				}

			if ( tun4in6 )
			{
				var nodename = description.globalId.replace(/\..+$/,'');

				for( var i = 0; i < tun4in6.length; i++ )
				{
					var tr = tb.insertRow(-1);
					var network =  tun4in6[i].network;
					var network_len = tun4in6[i].networklen;
					var network_bw = tun4in6[i].bandwidth;

					if ( network_len >= 32 ) continue;

					tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((rowcount++ % 2) + 1);
					tr.insertCell(-1).innerHTML = String.format('<a href="/cgi-bin/bmx6control?function=gwselect&amp;node=%s"><img src="%s" /></a>',nodename,tunicon);
					tr.insertCell(-1).innerHTML = nodename;
					tr.insertCell(-1).innerHTML = network + '/' + network_len;
					tr.insertCell(-1).innerHTML = network_bw;


				}

				if( tb.rows.length == 1 )
				{
					var tr = tb.insertRow(-1);
						tr.className = 'cbi-section-table-row';

					var td = tr.insertCell(-1);
						td.colSpan = 4;
						td.innerHTML = '<em><br /><%:There are no gateways announced in the network.%></em>';
				}
				}
			}
		}
	);
//]]></script>

<style>

	div.hideme{
		display: none;
	}

	div.info{
		background: #FFF;
		border: solid 1px;
		height: 80px;
		display: block;
		overflow: auto;
	}

	div.inforow{
		text-align:left;
		display:inline-block;
		width:20%;
		margin:5px;
		vertical-align:top;

	}

#extra-info ul { list-style: none outside none; margin-left: 0em; }

</style>
<div class="cbi-map">

<h2>Originators</h2>
<div class="cbi-map-descr"></div>
<fieldset class="cbi-section">
	<legend><%:Mesh gateways%></legend>
	<table class="cbi-section-table" id="descriptions_table">
		<tr class="cbi-section-table-titles">
			<th class="cbi-section-table-cell"></th>
			<th class="cbi-section-table-cell"><%:Node%></th>
			<th class="cbi-section-table-cell"><%:Network%></th>
			<th class="cbi-section-table-cell"><%:Bandwidth%></th>
		</tr>
		<tr class="cbi-section-table-row">
			<td colspan="4"><em><br /><%:Collecting data...%></em></td>
		</tr>
	</table>
</fieldset>

</div>

<%+footer%>

